<%@ page contentType="text/html;charset=UTF-8" language="java" %>
<%@ taglib prefix="c" uri="http://java.sun.com/jsp/jstl/core" %>
<html>
<head>
    <link rel="stylesheet" href="${pageContext.request.contextPath}/css/bootstrap.css">
    <link rel="stylesheet" href="${pageContext.request.contextPath}/css/layout.css">
    <link rel="stylesheet" href="${pageContext.request.contextPath}/css/managementLayout.css">
    <script src="${pageContext.request.contextPath}/js/jquery1.12.4.js"></script>
    <script src="${pageContext.request.contextPath}/js/bootstrap.js"></script>
    <script src="${pageContext.request.contextPath}/js/monitor.js"></script>
    <script src="${pageContext.request.contextPath}/js/slider.js"></script>
    <script src="${pageContext.request.contextPath}/js/vue.js"></script>
    <script src="${pageContext.request.contextPath}/js/axios.min.js"></script>
    <title>权限列表</title>
</head>
<body>
<div id="container">
    <section class="public-main">
        <jsp:include page="NavigationUtil.jsp" flush="true"></jsp:include>
        <!-- 主体部分 -->
        <div class="public-main-right">
            <header class="nav-wrapper">
                <div class="main-right-header">
                    <div class="location">
                        <strong>权限管理</strong>
                        <span>权限列表</span>
                    </div>
                    <div class='main-right-header-right'>
                            <span class="">
                                <span style="font-weight: bolder">${thisAccount.roleName}</span>：${thisAccount.realName}
                            </span>

                        <span class="">
                            <a href="${pageContext.request.contextPath}/index.jsp">
                                <c:if test="${thisAccount.head!=''}">
                                    <img src="img/head/${thisAccount.head}" style="width: 25px">
                                </c:if>
                                <c:if test="${thisAccount.head==''}">
                                    <img src="img/head/initial.jpg" style="width: 25px">
                                </c:if>
                            </a>
                        </span>
                        <c:if test="${thisAccount!=null}">
                            <span class=""><a href="${pageContext.request.contextPath}/loginContoller/returnLogin">退出登录</a></span>
                        </c:if>
                        <c:if test="${thisAccount==null}">
                            <span class=""><a href="${pageContext.request.contextPath}/loginContoller/returnLogin">未登录，快快点击登录吧~</a></span>
                        </c:if>
                    </div>
                </div>
            </header>

            <form>
                <div class="search">
                    <span>权限名称:</span>
                    <input style="width: 160px" type="text" placeholder="权限名称" v-model="rightKey.rightClassOne.rightName" />
                    <span>权限表述:</span>
                    <input style="width: 160px" type="text" placeholder="权限表述" v-model="rightKey.rightClassOne.describe" />

                    <span>状态:</span>
                    <select name="status" v-model="rightKey.rightClassOne.status" >
                        <option  :value=null >--请选择--</option>
                        <option  :value="noStatus" >禁用</option>
                        <option  :value="isStatus" >启用</option>
                    </select>

                    <span>权限类型:</span>
                    <select name="roleId" v-model="rightKey.rightClassOne.rightSuperId" >
                        <option :value=null >--请选择--</option>
                        <option :value=1 >操作权限</option>
                        <option :value=2 >主页</option>
                        <option :value=21 >前台权限</option>
                        <option :value=7 >后台权限</option>
                    </select>

                    <input type="button" value="搜索" @click="FuzzySelect()"/>
                    <input type="button" value="重置" @click="cleanFuzzySelect()"/>
                    <a href="javascript:void(0)" @click="addBoxModel()" style="margin: 10px 30px">增加权限</a>
                </div>
            </form>
            <!-- 主体搜索及增加框 -->
            <div class='main-right-content'>
                <!-- 以下容器均可修改，原有id和class别动，否则样式会变 -->

                <table class="providerTable" cellpadding="1" cellspacing="1">
                    <tr class="firstTr">
                        <th width="10%">权限编号</th>
                        <th width="15%">权限名称</th>
                        <th width="20%">地址</th>
                        <th width="15%">权限表述</th>
                        <th width="15%">创建时间</th>
                        <th width="10%">状态</th>
                        <th width="15%">操作</th>
                    </tr>

                    <tr v-for="obj,key in pageInfo.list">
                        <td>{{obj.rightId}}</td>
                        <td>{{obj.rightName}}</td>
                        <td>{{obj.url}}</td>
                        <td>{{obj.describe}}</td>
                        <td>{{obj.createDay}}</td>
                        <template v-if="obj.status==1">
                            <td>启用</td>
                        </template>
                        <template v-if="obj.status==0">
                            <td style="color: red">禁用</td>
                        </template>

                        <td>
                            <a href="javascript:void(0)" @click="viewRightModel(0,obj)"><img src="${pageContext.request.contextPath}/img/read.png" alt="查看" title="查看" /></a>
                            <template v-if="obj.rightId!=1 && obj.rightSuperId!=1">
                                <a href="javascript:void(0)" @click="updateRightModel(1,obj)"><img src="${pageContext.request.contextPath}/img/xiugai.png" alt="修改" title="修改" /></a>
                                <template v-if="obj.status==1">
                                    <a href="javascript:void(0)" @click="deleteRight(obj)"><img src="${pageContext.request.contextPath}/img/schu.png" alt="删除" title="删除" /></a>
                                </template>
                            </template>
                        </td>
                    </tr>
                </table>
                <div>
                    当前第{{pageInfo.pageNum}}页,共{{pageInfo.pages}}页,共{{pageInfo.total}}条数据
                </div>
                <nav aria-label="Page navigation" class="text-center">
                    <ul class="pagination">
                        <template v-if="pageInfo.hasPreviousPage">
                            <li>
                                <a href="javascript:void(0)" aria-label="Previous" @click="FuzzySelect(pageInfo.pageNum-1)">
                                    <span aria-hidden="true">&laquo;</span>
                                </a>
                            </li>
                        </template>
                        <template v-for="page in pageInfo.navigatepageNums">
                            <template v-if="pageInfo.pageNum!=page">
                                <li><a href="javascript:void(0)" @click="FuzzySelect(page)" >{{page}}</a></li>
                            </template>
                            <template v-if="pageInfo.pageNum == page">
                                <li class="active"><a >{{page}}</a></li>
                            </template>
                        </template>
                        <template v-if="pageInfo.hasNextPage">
                            <li>
                                <a href="javascript:void(0)" aria-label="Next" @click="FuzzySelect(pageInfo.pageNum+1)">
                                    <span aria-hidden="true">&raquo;</span>
                                </a>
                            </li>
                        </template>
                    </ul>
                </nav>

            </div>
            <footer>
                打牛蛙组教育集团
            </footer>


            <!-- 模态框内容可修改，最外层盒子别动，否则样式会变 -->
            <div class="modal fade" id="myModal" tabindex="-1" role="dialog" aria-labelledby="myModalLabel">
                <div class="modal-dialog modal-lg" role="document">
                    <div class="modal-content">
                        <div class="modal-header">
                            <button type="button" class="close" data-dismiss="modal" aria-label="Close"><span
                                    aria-hidden="true">&times;</span></button>
                            <template v-if="viewOnly==0">
                                <h4 class="modal-title" >查看详情</h4>
                            </template>
                            <template v-if="viewOnly==1">
                                <h4 class="modal-title" >修改详情</h4>
                            </template>
                        </div>
                        <template v-if="viewOnly==0">
                            <div class="modal-body">
                                <div class="tableList">
                                    <form action="#">
                                        <div class="">
                                            <label >权限编号：</label>
                                            <input type="text" disabled="disabled" v-model="rightModel.rightId" />
                                        </div>
                                        <div class="">
                                            <label >权限名称：</label>
                                            <input type="text" disabled v-model="rightModel.rightName"/>
                                        </div>
                                        <div class="">
                                            <label >地址：</label>
                                            <input type="text" disabled="disabled" v-model="rightModel.url" />
                                        </div>
                                        <div class="">
                                            <label >权限表述：</label>
                                            <input type="text" disabled="disabled" v-model="rightModel.describe" />
                                        </div>
                                        <div class="">
                                            <label >创建时间：</label>
                                            <input type="text" disabled="disabled" v-model="rightModel.createDay" />
                                        </div>
                                        <div class="">
                                            <label >状态：</label>
                                            <template v-if="rightModel.status==1">
                                                <input type="text" disabled="disabled" value="启用">
                                            </template>
                                            <template v-if="rightModel.status==0">
                                                <input type="text" disabled="disabled" value="禁用" style="color: red">
                                            </template>
                                        </div>
                                    </form>
                                </div>
                            </div>
                        </template>

                        <template v-if="viewOnly==1">
                            <div class="modal-body">
                                <div class="tableList">
                                    <form action="#">
                                        <div class="">
                                            <label >权限编号：</label>
                                            <input type="text" disabled="disabled" v-model="rightModel.rightId" />
                                            <span style="color: #f0ad4e;font-size: 10px;">*不可更改</span>
                                        </div>
                                        <div class="">
                                            <label >权限名称：</label>
                                            <input type="text" v-model="rightModel.rightName"/>
                                        </div>
                                        <div class="">
                                            <label >地址：</label>
                                            <template v-if="rightModel.rightSuperId==0">
                                                <input type="text" disabled v-model="rightModel.url" />
                                                <span style="color: #f0ad4e;font-size: 10px;">*不可更改</span>
                                            </template>
                                            <template v-else>
                                                <input type="text" v-model="rightModel.url" />
                                            </template>
                                        </div>
                                        <div class="">
                                            <label >权限表述：</label>
                                            <input type="text" v-model="rightModel.describe" />
                                        </div>
                                        <div class="">
                                            <label >创建时间：</label>
                                            <input type="text" disabled="disabled" v-model="rightModel.createDay" />
                                            <span style="color: #f0ad4e;font-size: 10px;">*不可更改</span>
                                        </div>
                                        <div class="">
                                            <label >状态：</label>
                                            <select name="status" v-model="rightModel.status">
                                                <option :value="noStatus" >禁用</option>
                                                <option :value="isStatus" >启用</option>
                                            </select>
                                        </div>
                                        <template v-if="rightModel.rightSuperId!=0 && rightModel.rightId!=rightModel.rightSuperId && rightModel.rightSuperId!=21">
                                        <div class="">
                                            <label>父级菜单：</label>
                                            <input type="text" v-model="rightModel.rightSuperId" />
                                        </div>
                                        </template>
                                    </form>
                                </div>
                            </div>
                        </template>
                        <div class="modal-footer">
                            <template v-if="viewOnly==1">
                                <button type="button" class="btn btn-primary" @click="updateRight()">确认</button>
                            </template>
                            <button type="button" class="btn btn-default" data-dismiss="modal">返回</button>
                        </div>
                    </div>
                </div>
            </div>


            <!-- 模态框内容可修改，最外层盒子别动，否则样式会变 -->
            <div class="modal fade" id="addMyModal" tabindex="-1" role="dialog" aria-labelledby="myModalLabel">
                <div class="modal-dialog modal-lg" role="document">
                    <div class="modal-content">
                        <div class="modal-header">
                            <button type="button" class="close" data-dismiss="modal" aria-label="Close"><span
                                    aria-hidden="true">&times;</span></button>
                            <template v-if="rightKey.addType==0">
                                <h4 class="modal-title">前端权限</h4>
                            </template>
                            <template v-if="rightKey.addType==1">
                                <h4 class="modal-title">后端权限</h4>
                            </template>

                        </div>
                            <div class="modal-body">
                                <div class="tableList">
                                    <form action="#">
                                        <div class="">
                                            <label >权限名称：</label>
                                            <input type="text"  v-model="rightKey.rightClassOne.rightName"/>
                                        </div>
                                        <div class="">
                                            <label >url：</label>
                                            <input type="text"  v-model="rightKey.rightClassOne.url" />
                                        </div>
                                        <div class="">
                                            <label >权限表述：</label>
                                            <input type="text"  v-model="rightKey.rightClassOne.describe" />
                                        </div>
                                        <div class="">
                                            <label >状态：</label>
                                            <select name="status" v-model="rightKey.rightClassOne.status">
                                                <option :value="noStatus" >禁用</option>
                                                <option :value="isStatus" >启用</option>
                                            </select>
                                        </div>
                                        <template v-if="rightKey.addType==1">
                                            <div class="">
                                                <label >菜单节点：</label>
                                                <label style="text-align: left"><input type="radio" name="rightSuperId" v-model="rightKey.rightClassOne.rightSuperId" :value=0 @click="showChild(2)"/>主菜单</label>
                                                <label style="text-align: left"><input type="radio" name="rightSuperId" @click="showChild(1)" />子菜单</label>
                                            </div>
                                            <template v-if="isChild==1">
                                                <label >父节点：</label>
                                                <select name="rightSuperId" v-model="rightKey.rightClassOne.rightSuperId">
                                                    <option v-for="obj in mainRight" :value="obj.rightId" >{{obj.rightName}}</option>
                                                </select>
                                            </template>
                                        </template>
                                    </form>
                                </div>
                            </div>
                        <div class="modal-footer">
                            <button type="button" class="btn btn-primary" @click="insertRight()">确认</button>
                            <button type="button" class="btn btn-default" data-dismiss="modal">返回</button>
                        </div>
                    </div>
                </div>
            </div>

            <!-- 模态框内容可修改，最外层盒子别动，否则样式会变 -->
            <div class="modal fade" id="addBoxA" tabindex="-1" role="dialog" aria-labelledby="myModalLabel">
                <div class="modal-dialog modal-lg" role="document">
                    <div class="modal-content">
                        <div class="modal-header">
                            <button type="button" class="close" data-dismiss="modal" aria-label="Close"><span
                                    aria-hidden="true">&times;</span></button>
                            <h4 class="modal-title" id="addBoxBef">请选择</h4>
                        </div>
                        <div class="modal-body">
                            <div class="tableList">
                                <form action="#">
                                    <div class="">
                                        <label >增加：</label>
                                        <button type="button" class="btn btn-primary" @click="addRightModel(0)">前台权限</button>
                                        <button type="button" class="btn btn-primary" @click="addRightModel(1)">后台权限</button>
                                    </div>
                                </form>
                            </div>
                        </div>
                        <div class="modal-footer">
                            <button type="button" class="btn btn-default" data-dismiss="modal">返回</button>
                        </div>
                    </div>
                </div>
            </div>

        </div>
    </section>
</div>




<!-- 每一页需加上slider，否则js动效无法显示 -->
<script src="${pageContext.request.contextPath}/js/slider.js"></script>
<!-- 每一页需加上slider，否则js动效无法显示 -->

<script type="text/javascript">
    new Vue({
        el: ".public-main-right",
        data:{
            viewOnly:0,//Number类型,0只展示，1可以修改，2可以添加
            rightModel:{},
            //addRight:{},
            isStatus:1,//启用
            noStatus:0,//禁用
            //addType:0,//0前台权限，1后台权限
            isChild:0,//是否展示下拉框
            mainRight:[],//主菜单列表
            rightKey:{rightClassOne:{rightName:"",url:"",describe:"",status:1,rightSuperId:null},addType:0,page:null},
            pageInfo:{},
        },
        methods: {
            showMainRightList:function () {
                var _this=this;
                axios.get("/rightController/showMainRight")
                .then(function (response) {
                    _this.mainRight=response.data;
                })
                .catch(function (error) {
                    console.log(error);
                })
            },
            deleteRight:function (obj) {
                var _this=this;
                axios.post("/rightController/deleteRight",obj)
                .then(function (response) {
                    if (response.data=="true"){
                        alert("删除成功！");
                        _this.FuzzySelect();
                    }
                })
            },
            viewRightModel:function (key,obj) {
                this.viewOnly=key;
                this.rightModel=obj;
                $('#myModal').modal("show");
            },
            updateRightModel:function (key,obj) {
                this.viewOnly=key;
                this.rightModel=obj;
                this.showMainRightList();
                $('#myModal').modal("show");
            },
            addBoxModel:function () {
                this.isChild=0;
                this.rightKey={rightClassOne:{rightName:"",url:"",describe:"",status:1,rightSuperId:null,},addType:0};
                $('#addBoxA').modal("show");
            },
            addRightModel:function (key) {
                this.rightKey.addType=key;
                this.showMainRightList();
                $('#addBoxA').modal("hide");
                $('#addMyModal').modal("show");
            },
            updateRight:function () {
                var _this=this;
                axios.post("/rightController/updateRight",_this.rightModel)
                .then(function (response) {
                    if (response.data=="true"){
                        alert("修改成功");
                        $('#myModal').modal("hide");
                        _this.FuzzySelect();
                    }else {
                        alert("修改失败");
                        $('#myModal').modal("hide");
                    }
                })
                .catch(function (error) {
                    console.log(error);
                })
            },
            showChild:function (key) {
                this.isChild=key;
            },
            insertRight:function () {
                var _this=this;
                if(_this.rightKey.rightClassOne.rightName==""){
                    alert("请输入权限名称！")
                }else if (_this.rightKey.rightClassOne.url==""){
                    alert("请输入url！")
                }else if (_this.rightKey.rightClassOne.status==null){
                    alert("请选择状态！")
                }else {
                    axios.post("/rightController/addRight",_this.rightKey)
                        .then(function (response) {
                            if (response.data=="true"){
                                alert("添加成功！");
                                $('#addMyModal').modal("hide");
                                _this.rightKey={rightClassOne:{rightName:"",url:"",describe:"",status:1,rightSuperId:null,},addType:0};
                                _this.FuzzySelect();
                            }else if(response.data=="false"){
                                alert("添加失败！");
                                _this.rightKey={rightClassOne:{rightName:"",url:"",describe:"",status:1,rightSuperId:null,},addType:0};
                            }
                        })
                        .catch(function (error) {
                            console.log(error);
                        })
                }

            },
            FuzzySelect:function (page) {
                var _this=this;
                _this.pageInfo={};
                this.rightKey.page=page;
                console.log(this.rightKey);
                axios.post("/rightController/fuzzySelectRight",_this.rightKey)
                .then(function (response) {
                    console.log(response.data);
                    if (response.data.size==0){
                        alert("没有此权限")
                    }else if (response.data.size>0){

                        _this.pageInfo=response.data;
                    }
                })

            },
            cleanFuzzySelect:function () {
                this.rightKey={rightClassOne:{rightName:"",url:"",describe:"",status:1,rightSuperId:null},addType:0};
            },

        },
        created:function () {
            this.FuzzySelect();
        }
    });
</script>
</body>
</html>

